<template>
	<view>
		<view class="roast" v-for="(item,index) in tabList" :key="index" @click="goDetail(item)">
			<view class="userinfo dis jcsb aic">
				<view class="dis aic">
					<view class="aravat">
						<image style="width: 100%" :src="item.avatar ? item.avatar: '/static/icon/icon04.png'"
							mode="widthFix"></image>
					</view>
					<view class="">
						<view class="dis jss aic">
							<view class="username">{{item.nickName}}</view>
							<!-- <image class="live" src="/static/icon/live1.png" mode="widthFix"></image> -->
						</view>
						<view class="dis jss aic time">
							<view>{{item.createTime | monthDay }}</view>
							<view>{{item.createTime | hourMinute  }}</view>
						</view>
					</view>
				</view>
				<More v-if="isopen" :id='item.id'></More>
			</view>
			<view class="centent">
				<text class="type">{{item.categoryTwoName}}</text>
				<text class="text">{{item.content}}</text>
			</view>
			<viwe class="image" v-if="item.images">
				<view>
					<image v-if="item.images.split(',')[0]" :src="item.images.split(',')[0]" class="image_art"
						mode="aspectFit"></image>
					<image v-if="item.images.split(',')[1]" :src="item.images.split(',')[1]" class="image_art"
						mode="aspectFit"></image>
				</view>
			</viwe>
			<view class="detail dis aic jcsb">
				<view class="dis aic jcc">
					<view class="browse">
						{{item.lookCount}}浏览
					</view>
					<!-- 	<view class="like">
						{{item.likeCount}}点赞
					</view>
					<view class="comment">
						{{item.commentCount}}评论
					</view> -->
				</view>
				<view class="dis jcc aic operate">
					<CommentInput></CommentInput>
					<view class="number">{{item.commentCount}}</view>
					<view class="line2"></view>
					<image class="zan" :src="item.isLike == 1  ? '/static/icon/zan.png' : '/static/icon/zan2.png'"
						mode="widthFix" @click.stop="like(item)"></image>
					<view class="number">{{item.likeCount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import More from '@/compontents/More.vue'
	import CommentInput from '@/compontents/CommentInput.vue'
	import {
		discussionLike
	} from '@/api.js'
	export default {
		components: {
			More,
			CommentInput
		},
		props: {
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			isopen: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			isMy: {
				type: Boolean,
				default: () => {
					return false
				}
			},
		},
		filters: {
			// 提取月份和日期
			monthDay(value) {
				if (!value) return ''
				const datePart = value.split(' ')[0] || ''
				return datePart.substr(5)
			},

			// 提取时分并转换格式
			hourMinute(value) {
				if (!value) return ''
				const timePart = value.split(' ')[1] || ''
				return timePart.replace(/:\d+$/, '').replace(':', '.')
			}
		},
		data() {
			return {

			}
		},
		methods: {

			goDetail(item) {
				console.log('item', item.id);
				console.log('isMy', this.isMy);
				uni.navigateTo({
					url: '/pages/index/detail?id=' + item.id + '&isMy=' + this.isMy
				})
			},
			async like(item) {

				let res = await discussionLike({
					contentId: item.id,
					type: item.isLike == 0 ? 1 : 0
				})
				if (res.code == 200) {
					this.tabList.forEach((el) => {
						if (el.id == item.id) {
							el.isLike = el.isLike == 0 ? 1 : 0
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.roast {
		padding: 30rpx;
		box-sizing: border-box;

		.userinfo {
			.aravat {
				width: 70rpx;
				height: 70rpx;
				border-radius: 70rpx;
				overflow: hidden;
				margin-right: 15rpx;
			}

			.live {
				width: 50rpx;
			}



			.username {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #858585;
				margin-top: 2rpx;

				view {
					margin-right: 10rpx;
				}
			}
		}

		.centent {
			.type {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(0, 199, 119, 0.6);
				width: 125rpx;
				height: 44rpx;
				line-height: 48rpx;
				background: rgba(218, 255, 240, 0.6);
				border-radius: 27rpx 27rpx 27rpx 27rpx;
				padding: 4rpx 14rpx;
				margin-right: 6rpx;
			}

			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 48rpx;
				color: #000000;
			}
		}

		.detail {
			margin-top: 10rpx;

			.browse {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #585858;
				line-height: 36rpx;
			}

			.like {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #585858;
				line-height: 36rpx;
				margin: 0 12rpx;
			}

			.comment {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #585858;
				line-height: 36rpx;
			}

			.line2 {
				width: 2rpx;
				height: 30rpx;
				background: #9B9B9B;
				margin: 0 18rpx;
			}

			.zan {
				width: 34rpx;
				margin-bottom: 6rpx;
			}

			.operate {
				width: 220rpx;

				height: 52rpx;
				background: #F8F8F8;
				border-radius: 100rpx 100rpx 100rpx 100rpx;

				.number {
					font-size: 24rpx;
					color: #585858;
					margin: 0 10rpx;
				}
			}
		}
	}

	.image_art {
		max-width: 300rpx;
		max-height: 300rpx;
		margin-right: 20rpx;
	}
</style>